<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .sortable{
            background-color:#d3e3e8;
            height: 30px;
        }
        table{
            border-collapse:collapse;
        }
        td,th{
            border: 1px solid #000000;
        }
        .scrollTable{
            position: relative;
            width: 100%;
            height: 220px;
            overflow: hidden;
            overflow-y:auto;
        }
        .scrollTable table td{
            height: 21px;
        }
        .color{
            width: 100%;
            background-color: #e3e3e8;
        }
        .head{
            height: 80px;
        }
        .foot{
            height: 150px;
        }
        .pointer{
            cursor: pointer;
        }
        a:link{
            text-decoration:none;
        }
        a:visited{
            text-decoration:none;
        }
        a:hover{
            text-decoration:none;
        }
        a:active{
            text-decoration:none;
        }
    </style>
</head>
<body  ng-controller="table">
<table style="width: 100%">
    <thead>
        <tr>
            <th class="sortable" style="width: 5%"></th>
            <th class="sortable" style="width: 20%">编号</th>
            <th class="sortable" style="width:20%">姓名</th>
            <th class="sortable" style="width: 14.7%">性别</th>
            <th class="sortable" style="width:19%">薪资</th>
            <th class="sortable" style="width: 20%">年龄</th>
            <th class="sortable" style="width: 5%"></th>
        </tr>
    </thead>
    <tr class="color head"><td colspan="7" style="width: 100%"></td></tr>
    <tr>
        <td colspan="7">
            <div class="scrollTable">
                <table style="width: 100%;">
                    <tbody class="trheight">
                    <tr style="height: 10px" ng-repeat="list in lists">
                        <td id={{list.id}} style="width: 5%">{{list.id}}</td>
                        <td style="width: 20%">{{list.user_id}}</td>
                        <td style="width:20%">{{list.name}}</td>
                        <td style="width: 15%">{{list.sex}}</td>
                        <td style="width:20%">{{list.money}}</td>
                        <td style="width: 20%">{{list.age}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
    <tr class="color foot"><td colspan="7" style="width: 100%"></td></tr>
    <tr class="sortable">
        <td colspan="7" style="width: 100%">
            <div>
                <select class="num pointer" style="margin-left: 3px;" ng-mouseleave="pageChecked()">
                    <option value="1">1</option>
                    <option value="5">5</option>
                    <option value="10" selected = selected>10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                </select>
                <span>|</span>
                <span class="pointer" ng-click="leftMore()"><a href="{{leftgo}}"><<</a></span>
                <span class="pointer" ng-click="left()"><a href="{{leftgo}}"><</a></span>
                <input type="text" ng-model="thisNum" value="1"  readonly style="margin-left: 3px;width: 25px;"/>
                <span>/</span>
                <span>{{pageNum}}</span>
                <span class="pointer" ng-click="right()"><a href={{rightgo}}>></a></span>
                <span class="pointer" ng-click="rightMore()"><a href="{{rightgo}}">>></a></span>
                <span>|</span>
            </div>
        </td>
    </tr>
</table>

<script src="../angular/angular.js"></script>
<script src="../js/jquery.js"></script>
<script>
    //jquery
    var num = 10;
    var trheight = $('.trheight tr').height();
    //angular
    var app = angular.module('myApp', []);
    app.controller('table',['$scope','$http',function($scope,$http){
        $http({
           // method:'JSON',
            url:'bower.json'
        }).success(function(data,status){
            var i = 1;
            var all = data.length;
            var page = Math.ceil(all/num);
            var pagenum = 1;
            $scope.lists = data;
            //jquery
            $('.scrollTable').css('height',10*trheight);
            $scope.pageChecked = function(){
                num = $('.num').val();
                $('.scrollTable').css('height',num*trheight);
                page = Math.ceil(all/num);
                $scope.pageNum = page;
                $scope.thisNum = Math.ceil(pagenum/num);
                i = Math.ceil(pagenum/num);
            }
            $scope.pageNum = page;
            $scope.thisNum = i;
            $scope.leftMore = function(){
                i = 1;
                $scope.thisNum = 1;
                $scope.leftgo = '#'+ i;
                pagenum = i;
            }
            $scope.left = function(){
                if(i <= 2){
                    i=1;
                    $scope.thisNum = i;
                    $scope.leftgo = '#'+  i;
                    pagenum = i;
                }else{
                    $scope.thisNum = --i;
                    i = i-1;
                    $scope.leftgo = '#'+ (num * i +1);
                    pagenum = num * i +1;
                    i = i+1;
                }
            }
            $scope.right = function(){
                if(i<page){
                    $scope.rightgo = '#'+ (num * i + 1);
                    pagenum = num * i + 1;
                    $scope.thisNum = ++i;
                }
            }
            $scope.rightMore = function(){
                i = page;
                $scope.thisNum = page;
                $scope.rightgo = '#'+ (num * i);
                pagenum = num * i;
            }
            console.log(data.length)
        }).error(function(data, status) {
            console.log(data);
        });
    }]);
</script>
</body>
</html>